<template>
    <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Row type="flex" justify="start">
            <Col span="14" offset="3">
                <!--{{this.optionState === false ? '添加' : '修改'}}-->
                <Form label-position="left" :model="formItem" :label-width="100">
                    <FormItem label="上级机构：" v-if="optionState === false">
                        <Input v-model="formItem.super_name" style="width: 70%" placeholder="必填" disabled></Input>
                    </FormItem>
                    <FormItem label="机构名称：">
                        <Input v-model="formItem.name" style="width: 70%" placeholder="必填"></Input>
                    </FormItem>
                    <FormItem label="运营商编号：">
                        <Select v-model="formItem.sys_area" style="width: 70%" disabled>
                            <Option value="LA">沈阳-居游</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="归属区域：">
                        <span v-if="optionState">{{formItem.area_name}}</span>
                        <!--区{{formItem.district_id}}-街道{{formItem.street_id}}-->
                        <!--<Cascader :data="cityList" @on-visible-change="cityListShowChange" @on-change="cityListChange" style="width: 70%" clearable></Cascader>-->
                        <Row>
                            <Col span="12">
                                <Select v-model="formItem.district_id" @on-change="areaListChange" style="width: 90%" filterable clearable>
                                    <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </Col>
                            <Col span="12">
                                <Select v-model="formItem.street_id" style="width: 90%" filterable clearable>
                                    <Option v-for="item in streetList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="机构类型：">
                        <Select v-model="formItem.type" style="width: 70%" disabled>
                            <Option value="1">公司</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="机构等级：">
                        <Select v-model="formItem.grade" style="width: 70%" disabled>
                            <Option value="1">一级</Option>
                            <Option value="2">二级</Option>
                            <Option value="3">三级</Option>
                            <Option value="4">四级</Option>
                            <Option value="5">五级</Option>
                            <Option value="6">六级</Option>
                            <Option value="7">七级</Option>
                            <Option value="8">八级</Option>
                            <Option value="9">九级</Option>
                            <Option value="10">十级</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="是否启用：">
                        <i-switch v-model="formItem.USEABLE" true-value="1" false-value="0" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="联系地址：">
                        <Input v-model="formItem.address" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="邮政编码：">
                        <Input v-model="formItem.zip_code" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="电话：">
                        <Input v-model="formItem.phone" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="传真：">
                        <Input v-model="formItem.fax" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="邮箱：">
                        <Input v-model="formItem.email" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="负责人：">
                        <Input v-model="formItem.master" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="主负责人：">
                        <Input v-model="formItem.PRIMARY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="副负责人：">
                        <Input v-model="formItem.DEPUTY_PERSON" style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="排序：">
                        <InputNumber :min="0" v-model="formItem.sort" style="width: 30%"></InputNumber>
                    </FormItem>
                    <FormItem label="备注信息：">
                        <Input v-model="formItem.remarks" maxlength="255" show-word-limit type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"></Input>
                    </FormItem>
                    <template v-if="optionState === false">
                        <FormItem>
                            <Checkbox size="large" v-model="roleState">勾选之后，会自动添加同名的用户。用户初始密码:000000，请尽快修改密码。</Checkbox>
                        </FormItem>
                        <FormItem label="用户角色：" v-if="roleState">
                            <Tag v-for="item in roleList" size="medium" :checkable="true" :checked="false" :key="item.id"
                                 :name="item.name" @on-change="tagClick" style="cursor: pointer">{{ item.name }}
                            </Tag>
                        </FormItem>
                    </template>
                    <FormItem>
                        <Button shape="circle" type="primary" :loading="btnLoading" @click="saveOption">保存</Button>
                        <Button shape="circle" style="margin-left: 8px" @click="cancelOption">取消</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </div>
</template>

<script>
import {
  getCompanyRoleList,
  saveOffice,
  getAreaList,
  getSYAreaList,
  getById
} from '@/api/system/system'

export default {
  name: 'companyOption',
  props: {
    companyId: {
      type: String,
      default: () => {
        return ''
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {
          USEABLE: '1'
        }
      }
    },
    optionState: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      spinShow: false,
      cityList: [],
      areaList: [],
      streetList: [],
      currentCityPid: '',
      roleList: [],
      roleState: false,
      formItem: {
        USEABLE: '1',
        set_user: false,
        login_flag: ''
      }
    }
  },
  mounted () {
    this.getSYAreaListAction({ parent_id: 139907 }, 'area')
  },
  methods: {
    tagClick (checked, name, id) {
      this.roleList.forEach(item => {
        if (item.name === name) {
          checked === true ? item.state = true : item.state = false
        }
      })
    },
    getRoleList (data) {
      getCompanyRoleList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.roleList = data.data
        } else {
          this.error(data)
        }
      })
    },
    getAreaList (param) {
      getAreaList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let cityData = []
          data.data.forEach(item => {
            cityData.push({ 'value': item.id, 'label': item.name })
          })
          this.cityList = cityData
        } else {
          this.error(data)
        }
      })
    },
    cityListChange (val, sel) {
      this.currentCityPid = ''
      console.log(val, '--', sel)
      this.currentCityPid = val[0]
      console.log('当前pid', this.currentCityPid)
      this.getSYAreaListAction({ parent_id: val[0] })
    },
    areaListChange (val) {
      if (val) {
        this.getSYAreaListAction({ parent_id: val }, 'street')
      }
    },
    cityListShowChange (val) {
      if (val) {
        console.log('--', val)
      }
    },
    getSYAreaListAction (param, type) {
      console.log('--')
      getSYAreaList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          data.data.forEach(item => {
            item.value = item.id
            item.label = item.name
          })
          // cityData = this.$common.xeUtils.clone(this.$common.toTree(data.data, 'children', 'id', 'parent_id'), true)
          if (type === 'area') {
            this.areaList = data.data
            // console.log('区域数据', this.areaList)
          } else if (type === 'street') {
            this.streetList = data.data
            // console.log('街道数据', this.streetList)
          }
          this.areaList.forEach(item => {
            if (item.id === this.formItem.area_id) {
              this.formItem.district_id = area_id
            }
          })
          this.streetList.forEach(item => {
            if (item.id === this.formItem.area_id) {
              this.formItem.street_id = area_id
            }
          })
        } else {
          this.error(data)
        }
      })
    },
    getById (data) {
      this.spinShow = true
      getById(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = {
            ...data.data,
            ...this.formItem
          }
          this.spinShow = false
        } else {
          this.error(data)
        }
      })
    },
    saveOption () {
      // 归属区域数据处理
      this.formItem.area_id = this.formItem.street_id ? this.formItem.street_id : this.formItem.district_id
      console.log('当前区域id', this.formItem.area_id)
      // 添加机构用户绑定角色的处理
      if (this.optionState === false) {
        let roleList = []
        this.roleList.forEach(item => {
          if (item.state !== undefined) {
            if (item.state === true) {
              roleList.push(item.id)
            }
          }
        })
        this.formItem.rolelist = roleList
      }
      if (this.roleState === true) {
        this.formItem.set_user = true
        this.formItem.login_flag = '1'
      }
      // console.log('表单', this.formItem)
      // 保存操作
      this.btnLoading = true
      saveOffice(this.formItem).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    cancelOption () {
      this.$emit('cancelOption')
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
    formData () {
      this.formItem = this.$common.xeUtils.clone(this.formData)
    }
  }
}
</script>

<style scoped>

</style>
